<template>
	<div id="worker">
		<template>
			<el-form :inline="true" :model="searchWorkerForm" class="demo-form-inline">
				<el-button type="primary" @click="preSaveWorker">添加送水工</el-button>
				&nbsp;&nbsp;&nbsp;
				<el-form-item label="搜索条件">
					<el-input v-model="searchWorkerForm.searchCondition" required="true" placeholder="搜索条件">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="listWorker">搜索</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="workerList" stripe style="width: 100%">
				<el-table-column prop="wid" label="送水工编号" width="180">
				</el-table-column>
				<el-table-column prop="workerName" label="送水工名称" width="180">
				</el-table-column>
				<el-table-column prop="workerSalary" label="送水工底薪" width="180">
					<template slot-scope="scope">
						<i class="el-icon-plus" @click="adjustSalary(scope.row.wid, scope.row.workerSalary + 100)"></i>
						{{scope.row.workerSalary}}
						<i class="el-icon-minus" @click="adjustSalary(scope.row.wid, scope.row.workerSalary - 100)"></i>
					</template>
				</el-table-column>
				<el-table-column prop="workerMoney" label="每桶水提成" width="180">
				</el-table-column>
				<el-table-column label="送水工照片" width="150px">
					<template slot-scope="scope">
						<el-image v-show="scope.row.workerImage == null" style="width: 60px; height: 60px"
							:src="require('../images/user.png')" />
						<el-image v-show="scope.row.workerImage != null" style="width: 60px; height: 60px"
							:src="'http://localhost:8097/'+scope.row.workerImage" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200px">
					<template slot-scope="scope">
						<!-- 删除按钮 -->
						<el-button type="primary" icon="el-icon-delete">
						</el-button>
						<!-- 修改按钮 -->
						<el-button type="danger" icon="el-icon-edit" @click="preUpdateWorker(scope.row.wid)">
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="sizes,prev, pager, next,jumper,->,total" :page-size.sync="pageSize"
				:current-page.sync="pageNum" :page-sizes="[5,10,20]" :total="total" :hide-on-single-page="true"
				@current-change="listWorker" @size-change="listWorker">
			</el-pagination>

			<!-- 添加送水工对话框 -->
			<el-dialog title="添加送水工" :visible.sync="addWorkerBox" width="50%" :before-close="handleClose">
				<el-form ref="addWorkerDataForm" label-width="100px" v-model="addWorkerDataForm">
					<el-form-item label="送水工名称:">
						<el-input placeholder="请输入送水工名称" maxlength="50" v-model="addWorkerDataForm.workerName" />
					</el-form-item>
					<el-form-item label="底薪:">
						<el-input placeholder="请输入送水工底薪" maxlength="50" v-model="addWorkerDataForm.workerSalary" />
					</el-form-item>
					<el-form-item label="提成:">
						<el-input placeholder="请输入送水工提成" maxlength="50" v-model="addWorkerDataForm.workerMoney" />
					</el-form-item>
					<el-form-item label="照片:">
						<el-upload class="avatar-uploader" action="" :show-file-list="false" :headers="headers"
							:before-upload="beforeUpload">
							<img v-if="addImageurl" :src="addImageurl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>

				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="saveWorker">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 修改送水工对话框 -->
			<el-dialog title="修改送水工" :visible.sync="updateBox" width="50%" :before-close="updateHandleClose">
				<el-form ref="updateDataForm" label-width="100px" v-model="updateDataForm">
					<el-form-item label="送水工名称:">
						<el-input placeholder="请输入送水工名字" maxlength="50" v-model="updateDataForm.workerName" />
					</el-form-item>
					<el-form-item label="送水工底薪:">
						<el-input placeholder="请输入送水工底薪" maxlength="50" v-model="updateDataForm.workerSalary" />
					</el-form-item>
					<el-form-item label="每桶提成">
						<el-input placeholder="请输入每桶提成" maxlength="50" v-model="updateDataForm.workerMoney" />
					</el-form-item>
					<el-form-item label="送水工照片">
						<el-upload class="avatar-uploader" action="" :show-file-list="false" :headers="headers"
							:before-upload="beforeUpdateload">
							<img v-if="updateImageurl" :src="updateImageurl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="updateWorker">确 定</el-button>
				</span>
			</el-dialog>

		</template>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				workerList: [],
				addWorkerBox: false,
				addWorkerDataForm: {
					workerName: '',
					workerMoney: '',
					workerSalary: '',
				},
				// 异步上传文件，将上传的文件通过该对象传入给后端
				addParams: new FormData(),
				// 图片的url
				addImageurl: '',
				// 定义上传文件的头信息
				updateBox: false,
				updateDataForm: {
					wid: '',
					workerName: '',
					workerSalary: '',
					workerMoney: ''
				},
				updateParams: new FormData(),
				updateImageurl: '',
				headers: {
					"Content-Type": "mulitpart/form-data"
				},
				// 新增加 总行数、当前页、每页个数
				total: 0,
				pageNum: 1,
				pageSize: 5,
				// 搜索表单
				searchWorkerForm: {
					searchCondition: ''
				}
			}
		},
		methods: {
			listWorker() {
				let src = '';
				if (this.searchWorkerForm.searchCondition != null && this.searchWorkerForm.searchCondition.length != 0) {
					// 搜索框内拥有搜索条件时
					src = 'http://localhost:8097/worker/searchWorker/' + this.pageNum + '/' + this.pageSize + '/' +
						this.searchWorkerForm.searchCondition;
				} else {
					// 搜索框内没有搜索条件时
					src = "http://localhost:8097/worker/listWorkerPage/" + this.pageNum + "/" + this.pageSize;
				}
				this.$axios.get(src).then((resp) => {
						this.workerList = resp.data.responseData.list;
						this.total = resp.data.responseData.total;
						this.pageNum = resp.data.responseData.pageNum;
					})
					.catch((error) => {
						this.$message.error("向后端发起搜索送水工列表请求失败");
						console.log(error);
					})
			},
			/* listWorker() {
				this.$axios.get('http://localhost:8097/worker/listWorker').then((resp) => {
					if (resp.data.responseMessage == "ok") {
						this.workerList = resp.data.responseData;
						this.$message.success("送水工列表响应成功");
					} else {
						this.$message.error("送水工列表显示失败");
					}
				}).catch((error) => {
					console.log(error);
					this.$message.error("送水工列表请求发送失败");
					return;
				})
			}, */

			//清空添加列表内所有信息
			clearWorkerModel() {
				this.addWorkerDataForm.workerName = '';
				this.addWorkerDataForm.workerSalary = '';
				this.addWorkerDataForm.workerMoney = '';
				this.addImageurl = '';
			},
			// 预添加送水工，显示对话框
			preSaveWorker() {
				this.clearWorkerModel();
				this.addWorkerBox = true;
			},
			// 关闭对话框之前的操作
			handleClose(done) {
				this.clearWorkerModel();
				done();
			},
			// 上传图片之前的操作
			beforeUpload(file) {
				// 将上传的图片显示在el-upload组件里面的img标签上，能够看到上传的图片
				let uploadUrl = window.URL || window.webkitURL;
				this.addImageurl = uploadUrl.createObjectURL(file);
				this.addParams.append('file', file);
				console.log(this.addParams);
			},
			// 添加送水工，上传图片
			saveWorker() {
				// 拼接参数
				this.addParams.append("workerName", this.addWorkerDataForm.workerName);
				this.addParams.append("workerSalary", this.addWorkerDataForm.workerSalary);
				this.addParams.append("workerMoney", this.addWorkerDataForm.workerMoney);

				this.$axios.post('http://localhost:8097/worker/saveWorker', this.addParams)
					.then((resp) => {
						if (resp.data.responseMessage == 'success') {
							this.$message.success("成功添加送水工");
						} else {
							this.$message.error("添加送水工失败");
						}
						this.addWorkerBox = false;
						this.listWorker();
						this.addParams = null;
						this.addParams = new FormData();
					}).catch((error) => {
						this.$message.error("添加送水工请求发送失败");
						console.log(error);
					})
			},

			// 调整工资
			adjustSalary(wid, workerSalary) {
				if (workerSalary < 0) {
					this.$message.error("调整工资失败！");
				} else {
					let formData = new FormData();
					formData.append('wid', wid);
					formData.append('workerSalary', workerSalary);
					this.$axios.post('http://localhost:8097/worker/adjustSalary', formData).then((resp) => {
						this.listWorker();
						this.$message.success("增加送水工工资成功!");
					}).catch((error) => {
						this.$message.error("增加送水工工资失败!");
					})
				}
			},

			updateHandleClose(done) {
				// 清空上一次表单的数据
				this.updateDataForm.workerName = '';
				this.updateDataForm.workerSalary = '';
				this.updateDataForm.workerMoney = '';
				done();
			},
			// 修改送水工信息，数据回显
			preUpdateWorker(wid) {
				this.$axios.get('http://localhost:8097/worker/getWorkerById/' + wid)
					.then((resp) => {
						if (resp.data.responseMessage == 'ok') {
							this.updateBox = true;
							this.updateDataForm = resp.data.responseData;
						} else {
							this.$message.error("修改送水工信息回显失败");
						}
					}).catch((error) => {
						this.$message.error("向后端发起送水工信息回显失败");
					})
			},
			beforeUpdateload(file) {
				//将上传的图片显示到el-upload组件的img标签上
				let uploadUrl = window.URL || window.webkitURL;
				this.updateImageurl = uploadUrl.createObjectURL(file);
				this.updateParams.append('file', file);
				return false;
			},
			updateWorker() {
				this.updateParams.append("wid", this.updateDataForm.wid);
				this.updateParams.append("workerName", this.updateDataForm.workerName);
				this.updateParams.append("workerSalary", this.updateDataForm.workerSalary);
				this.updateParams.append("workerMoney", this.updateDataForm.workerMoney);
				this.$axios.post('http://localhost:8097/worker/updateWorker', this.updateParams).then((resp) => {
					if (resp.data.responseMessage == 'ok') {
						this.$message.success("修改成功");
					} else {
						this.$message.error("修改失败");
					}
					this.addWorkerDataForm.workerName = '';
					this.addWorkerDataForm.workerSalary = '';
					this.addWorkerDataForm.workerMoney = '';
					this.wid = '';
					// 隐藏对话框
					this.updateBox = false;
					this.listWorker();
					this.updateParams = null;
					this.updateParams = new FormData();
				}).catch((error) => {
					this.$message.error("修改客户信息请求发送失败");
					console.log(error);
				})
			},
		},
		created() {
			this.listWorker();
		}
	}
</script>

<style>
	/* 上传图片相关的样式 */
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
